<template>
  <div class="table">
    <div class="handle-box">
      <div class="clearfix">
        <el-radio-group v-model="radio1">
          <el-radio-button label="出售中"></el-radio-button>
          <el-radio-button label="审核中"></el-radio-button>
          <el-radio-button label="已下架"></el-radio-button>
        </el-radio-group>
      </div>
      <div class="handle-filter clearfix">
        <div class="fl">
          <div class="filter-item"> 
            <form class="filter-search" action>
              <input type="text" placeholder="请输入商品名称查询" maxlength="15">
              <button>
                <i class="el-icon-search"></i>
              </button>
            </form>
          </div>
          <div class="filter-item">
            <el-button type="danger" disabled>下架</el-button>
          </div>
        </div>
        <div class="fr">
          <div class="filter-item">
            <el-date-picker
              v-model="formTime.time"
              type="datetimerange"
              align="right"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['00:00:00', '23:59:59']"
            ></el-date-picker>
          </div>
          <div class="filter-item filter-item-last">
            <el-button type="primary" icon="el-icon-circle-plus" @click="dialogAdd=true">添加</el-button>
          </div>
        </div>
      </div>
    </div>
    <el-table
      :data="tableData"
      border
      class="table"
      ref="multipleTable"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center"></el-table-column>
      <el-table-column prop="id" label="序号" sortable width="80" align="center"></el-table-column>
      <el-table-column prop="shopName" label="商品名称"></el-table-column>
      <el-table-column label="商品类型">
        <template slot-scope="scope">
          <div class="table-shopType" v-if="scope.row.shopType==1">
            <img src="@/assets/images/shopType-kj.png">砍价
          </div>
          <div class="table-shopType" v-if="scope.row.shopType==2">
            <img src="@/assets/images/shopType-ms.png">秒杀
          </div>
        </template>
      </el-table-column>
      <el-table-column label="商品价格" width="120">
        <template slot-scope="scope">
          <div>原价：￥{{scope.row.priceYuan}}</div>
          <div>底价：￥{{scope.row.priceDi}}</div>
        </template>
      </el-table-column>
      <el-table-column prop="pic" label="商品主图" width="120">
        <template slot-scope="scope">
          <div class="table-pic">
            <img :src="scope.row.pic" alt>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="stock" label="库存" width="100"></el-table-column>
      <el-table-column label="商品状态" width="90">
        <template slot-scope="scope">
          <div v-if="scope.row.status==1" class="status-radius green">出售中</div>
          <div v-if="scope.row.status==2" class="status-radius yellow">审核中</div>
          <div v-if="scope.row.status==3" class="status-radius red">已驳回</div>
          <div v-if="scope.row.status==4" class="status-radius gray">已撤回</div>
          <div v-if="scope.row.status==5" class="status-radius gray">已下架</div>
        </template>
      </el-table-column>
      <el-table-column prop="creatTime" label="创建时间" width="160"></el-table-column>
      <el-table-column label="操作" width="220">
        <template slot-scope="scope">
          <el-button size="mini" @click="editForm(scope.row)">编辑</el-button>
          <el-button size="mini" @click="soldOut(scope.row)">下架</el-button>
          <el-button size="mini">置顶</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
      ></el-pagination>
    </div>

    <!-- 弹出框 新增商品 -->
    <el-dialog title="新增商品" :visible.sync="dialogAdd" width="900px">
      <div class="dialog-box">
        <el-form ref="form" :model="addForm" label-width="100px">
          <el-form-item label="商品名称">
            <el-input type="text" v-model="addForm.shopName"></el-input>
          </el-form-item>
          <el-form-item label="商品类目">
            <el-cascader
              :options="shopTypeOptions"
              v-model="addForm.shopType"
              @change="handleChange"
            ></el-cascader>
          </el-form-item>
          <el-form-item label="门市价">
            <el-input v-model="addForm.price">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
          <el-form-item label="设置秒杀">
            <el-switch v-model="addForm.seckill"></el-switch>
          </el-form-item>
          <template v-if="addForm.seckill==true">
            <el-form-item label="秒杀价">
              <el-input type="text">
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
            <el-form-item label="库存">
              <el-input type="text">
                <template slot="append">份</template>
              </el-input>
            </el-form-item>
            <el-form-item label="自动补充库存">
              <el-switch></el-switch>
            </el-form-item>
            <el-form-item label="预警库存">
              <el-input type="text">
                <template slot="append">份</template>
              </el-input>
            </el-form-item>
          </template>
          <el-form-item label="设置砍价">
            <el-switch v-model="addForm.cut"></el-switch>
          </el-form-item>
          <template v-if="addForm.cut==true">
            <el-form-item label="底价">
              <el-input type="text">
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
            <el-form-item label="帮砍人数">
              <el-input type="text" placeholder="2~5人">
                <template slot="append">人</template>
              </el-input>
            </el-form-item>
            <el-form-item label="库存">
              <el-input type="text" placeholder="5~15份">
                <template slot="append">份</template>
              </el-input>
            </el-form-item>
            <el-form-item label="自动补充库存">
              <el-switch></el-switch>
            </el-form-item>
          </template>
          <el-form-item label="商品主图">
            <el-upload
              action="https://jsonplaceholder.typicode.com/posts/"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt>
            </el-dialog>
          </el-form-item>
          <el-form-item label="商品轮播图">
            <el-upload
              action="https://jsonplaceholder.typicode.com/posts/"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt>
            </el-dialog>
          </el-form-item>
          <el-form-item label="商品描述">
            <el-input type="textarea" v-model="form.remark" maxlength="100" show-word-limit></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogAdd = false">取 消</el-button>
        <el-button type="primary" @click="saveEdit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      formTime: {
        region: "",
        time: ""
      },
      formInline: {
        user: "",
        region: ""
      },
      radio1: "出租中",
      tableData: [
        {
          id: 1,
          shopName: "香干肉丝",
          shopType: "1",
          priceYuan: "239",
          priceDi: "189",
          pic: "",
          stock: "44",
          status: "1",
          creatTime: "2019-05-02 11:42:10"
        }
      ],
      dialogAdd: false,
      delVisible: false,
      form: {
        name: "",
        date: "",
        address: ""
      },
      //添加商品
      addForm: {
        shopName: "",
        shopType: "",
        price: "",
        seckill: false,
        cut: false
      },
      shopTypeOptions: [
        {
          value: "zhengcan",
          label: "正餐",
          children: [
            {
              value: "1",
              label: "自助餐"
            },
            {
              value: "2",
              label: "湖北菜"
            },
            {
              value: "3",
              label: "川菜"
            }
          ]
        },
        {
          value: "qingcan",
          label: "轻餐",
          children: [
            {
              value: "yinliao",
              label: "饮料"
            }
          ]
        }
      ]
    };
  },
  created() {},
  computed: {
    data() {}
  },
  methods: {
    //商品类目
    handleChange(value) {
      console.log(value);
    },
    //新增保存
    saveEdit() {},
    //编辑
    editForm() {
      this.dialogAdd = true;
    },
    //下架
    soldOut() {
      this.$confirm("此操作将永久下架该商品, 是否继续?", "提示", { 
        type: "warning"
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "下架成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消下架"
          });
        });
    }
  }
};
</script>

<style scoped lang="scss">
.dialog-box {
  width: 600px;
  margin: 0 auto;
  .el-cascader,
  .el-select {
    width: 100%;
  }
}
</style>
